<template>
  <div>
    <div class="header">
      <img class="mine" @click="changePhoto" :src="photo?photo:defaultPhoto" alt />
    </div>
    <p class="phone">{{phoneNumber}}</p>
    <ul class="card-wrap">
      <li class="item border-bottom" @click="jumpUrl('/pages/funeral-mine/fixName')">
        <div class="label-item">
          <span class="item-label">昵称</span>
          <span class="item-conten">{{name}}</span>
        </div>
        <div class="label-jump">
          修改
          <img src="/static/mine/right.svg" width="22rpx" alt />
        </div>
      </li>
      <li class="item" @click="jumpUrl('/pages/funeral-mine/accountSecurity')">
        <div class="label-item">
          <span class="item-label">账号与安全</span>
        </div>
        <div class="label-jump">
          <img src="/static/mine/right.svg" width="22rpx" alt />
        </div>
      </li>
    </ul>

    <ul class="card-wrap">
      <li class="item border-bottom">
        <div class="label-item">
          <span class="item-label">清除缓存</span>
          <span class="item-conten">{{cache}}</span>
        </div>
        <div class="label-jump">
          <!-- <img src="/static/mine/right.svg" width="22rpx" alt /> -->
          <div class="clear">清除缓存</div>
        </div>
      </li>
      <li class="item border-bottom" @click="jumpUrl('/pages/funeral-mine/aboutUs')">
        <div class="label-item">
          <span class="item-label">关于我们</span>
        </div>
        <div class="label-jump">
          <img src="/static/mine/right.svg" width="22rpx" alt />
        </div>
      </li>
      <li class="item">
        <div class="label-item">
          <span class="item-label">退出登陆</span>
        </div>
        <div class="label-jump">
          <!-- <img src="/static/mine/right.svg" width="22rpx" alt /> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultPhoto:'/static/mine/mine-empty.svg',
      photo:'',
      phoneNumber: '+86 133****3333',
      name:'王昭君',
      cache:'22.2MB'
    }
  },
  methods: {
    changePhoto(){
      uni.chooseImage({
        count:1,
        sizeType:['original','compressed'],
        sourceType:['album','camera'],
        success:(res)=>{
          // console.log('res=', res)
          // 把头像塞进来
          // 路径应该是这个
          this.photo = res.tempFilePaths[0]
        }
      })
    },
    jumpUrl(url){
      console.log('url',)
      uni.navigateTo({
        url
      })       
    }
  },
}
</script>

<style lang="scss" scope>
.header {
  text-align: center;
  .mine {
    margin-top: 32rpx;
    width: 176rpx; 
    height: 176rpx;  
  }
}

.card-wrap {
	// width: 642rpx;
	min-height: 86*2rpx;
	color: rgba(80, 80, 80, 1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	font-size: 14rpx;
	// line-height: 150%@at-root;
	// text-align: center;
  margin: 16rpx 40rpx 0;
  padding: 0;

  .item {
    display: flex;
    justify-content: space-between;
    height: 86rpx;
    font-size: 28rpx;
    align-items: center;
    padding-left: 34rpx;
    .item-label {
      margin-right: 32rpx;
    }
    .label-jump {
      display: flex;
      align-items: center;
    }
    .item-conten{
      color: rgba(80, 80, 80, 1);      
    }

  }
}

.phone {
  	color: rgba(80, 80, 80, 1);
	  font-size: 28rpx;
    text-align: center;
}
.border-bottom {
    border-bottom: 2rpx solid rgba(229, 229, 229, 1);
}

.clear {
	width: 54*2rpx;
	height: 23*2rpx;
	color: rgba(212, 48, 48, 1);
	border-radius: 12*2rpx;
	font-size: 10*2rpx;
	// line-height: 150%;
	border: rgba(212, 48, 48, 1) solid 2rpx;
	text-align: center;  
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8rpx;
}
</style>